<template>
  <div class="foot">
    <router-link to="DataMsg" tag="div" active-class="active">
      <div class="item">
        <img
          :src="this.$route.name == 'DataMsg'? require('./../assets/images/foot/data-active.png'):require('./../assets/images/foot/data.png')"
          alt
        />
           <div :class="this.$route.name == 'DataMsg'? 'active':'color'">数据信息</div> 
      </div>
    </router-link>


        <router-link to="ManagerHomePage" tag="div" active-class="active">
      <div class="item">
        <img
          :src="this.$route.name == 'ManagerHomePage'? require('./../assets/images/foot/homepage_active.png'):require('./../assets/images/foot/homepage.png')"
          alt
        />
           <div :class="this.$route.name == 'ManagerHomePage'? 'active':'color'">工作台</div> 
      </div>
    </router-link>

    <router-link to="ManagerMine" tag="div" active-class="active">
      <div class="item">
        <img :src="this.$route.name == 'ManagerMine'? require('./../assets/images/foot/mine_active.png'):require('./../assets/images/foot/mine.png')" alt />
        <div :class="this.$route.name == 'ManagerMine'? 'active':'color'">我的</div> 
      </div>
    </router-link>
  </div>
</template>
<script>
export default {
  mounted() {
  
  }
};
</script>
<style scoped>
.foot {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.2rem;
  padding-top: 0.2rem;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  justify-content: space-around;
}
.color{
 color:#999
}
.foot > div{
  width: 33%;
  text-align: center;
     font-size: 0.25rem;
   color: #999999;
}
.item > img {
  width: 17%;
  text-align: center;
}

.active {
   color: #DBB47F;
      font-size: 0.25rem;
}
</style>